<template>
  <div class="my-4 mx-8">
    <h3 class="py-4 mb-2 text-4xl">用户注册</h3>
    <p class="text-base text-warning my-2">
      需要通过用户邮箱进行账户激活。如果未能收到激活邮件，请使用相同的用户名再次注册！
      系统会重新发生激活邮件。
    </p>
    <ZForm ref="form" :model="values" :rules="rules" @success="register">
      <ZFormItem name="avatar" class="h-auto" :show-label="false">
        <ZImageInput
          name="avatar"
          class="rounded-full my-2 border mx-auto"
          v-model="values.avatar"
          :width="200"
          :max-size="800"
        />
      </ZFormItem>
      <ZFormItem name="email" label="电子邮件">
        <ZInput name="email" v-model="values.email" />
      </ZFormItem>
      <ZFormItem name="password" label="密码">
        <ZInput
          name="password"
          v-model="values.password"
          type="password"
          autocomplete="off"
        />
      </ZFormItem>
      <ZFormItem name="confirmPassword" label="确认密码">
        <ZInput
          name="confirmPassword"
          v-model="values.confirmPassword"
          type="password"
        />
      </ZFormItem>
      <ZFormItem name="nickname" label="昵称">
        <ZInput
          name="nickname"
          v-model="values.nickname"
          @input="changeNickname"
        />
      </ZFormItem>
      <ZButton type="submit" class="w-full tracking-widest">体验注册</ZButton>
    </ZForm>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";

import { Rules, Values } from "@/pkg/validate";
import type ZForm from "@/pkg/forms/ZForm.vue";
import { isString, notString } from "@/pkg/utils";
import { request } from "./apis";

const emit = defineEmits(["success"]);

const values = reactive({
    avatar: "/avatar/undefined",
    email: "",
    password: "",
    confirmPassword: "",
    nickname: "",
  }),
  rules: Rules = {
    avatar: { required: true, message: "头像不能为空" },
    email: [
      {
        required: true,
        email: true,
      },
      {
        minLength: 3,
        maxLength: 20,
        message: "用户名必须在3到20个字符之间",
      },
    ],
    password: [
      {
        required: true,
        message: "请输入密码",
      },
      {
        minLength: 6,
        maxLength: 20,
        message: "用户密码必须在6到20个字符之间",
      },
    ],
    confirmPassword: [
      {
        required: true,
        message: "请再次确认密码",
      },
      {
        minLength: 6,
        maxLength: 20,
        message: "确认密码必须在6到20个字符之间",
      },
      {
        same: "password",
      },
    ],
    nickname: [
      {
        required: true,
        message: "请输入昵称",
      },
      {
        maxLength: 50,
        message: "昵称最多50个字符",
      },
    ],
  },
  form = ref<InstanceType<typeof ZForm>>();
const changeNickname = () => {
  if (isString(values.avatar))
    values.avatar = `/avatar/${values.nickname || "NuxtJS"}`;
};
const register = async (values: Values) => {
  // 通过formData格式向服务器端发送数据
  const formData = new FormData();
  // 处理文件上传表单项
  Object.entries(values).forEach(([k, v]) => {
    if (k == "avatar" && notString(v)) {
      const avatar = v as File;
      formData.append(k, avatar, avatar.name);
    } else formData.append(k, v);
  });
  // ajax 发送 FormData 数据
  let { data } = await request("/register", {
    method: "POST",
    headers: { "Content-Type": "multipart/form-data" },
    data: formData,
  });
  if (data.success) {
    emit("success", data.object);
  } else {
    if (data.errors) {
      form.value?.setErrors(data.errors);
    }
  }
};
</script>
